// 给登录按钮添加单击事件
$('.loginBtn').click(function(){
    // 获取用户名 密码 确认密码
    let userVal = $('.user').val()
    let psdVal = $('.psd').val()

    // 正则校验
    if(!(/^\w+$/.test(userVal))) return alert('用户名不符合要求!')
    if(!(/^\d+$/.test(psdVal))) return alert('密码不符合要求!')

    // 请求登录接口
    let xhr = new XMLHttpRequest()
    xhr.open('post','http://cxk520.top:3000/users/login');
    // post方式携带请求参数，需要将参数写在send方法中，同时还需要设置请求头requestHeader
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    xhr.send(`username=${userVal}&userpwd=${psdVal}`);
    xhr.onreadystatechange = function(){
        if(this.readyState === 4){
            let res = JSON.parse(this.responseText);
            console.log(res);
            // 根据接口响应值进行业务逻辑处理
            // 1. 判断res中的data数组长度,如果长度为0的话，要弹窗提示当前用户名不存在
            if(res.data.length === 0) return alert('用户名不存在!')

            // 2. 判断res.data[0].userpwd  与  res.pwd，如果不一致，那么证明当前密码错误
            if(res.data[0].userpwd !== res.pwd) return alert('密码错误!')

            // 3. 登录成功，可以跳转首页 02
            alert('登录成功!')
            location.href = './my.html'
        }
    }
})